
*{
    margin: 0px;
    padding: 0px;
}

html{
    /* html元素的高度撑满一屏 */
    height: 100%;
    width: 100%;
}
body{
    /* 让body的高度是html高度的100% */
    height: 100%;
    width: 100%;
    background-color: #f8f9fa;
}
.wrap{
    height: 100%;
    position: relative;
}
/* ------------------------ header start */
.header{
    width: 100%;
    height: .64rem;
    /* 在移动端，不要使用固定定位，使用绝对定位代替固定定位 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: rgba(68,128,196,.6);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.header .search{
    /* 参考点 */
    position: relative;
}
.header .search .txt{
    height: .64rem;
    width: 6.22rem;
    border: none;
    border-radius: .16rem;
    text-align: center;
    font-size: .26rem;
}
.header .search span{
    position: absolute;
    top: .18rem;
    left: 1.66rem;
    font-size: .29rem;
    color: #c1c1c1;
}

.header .icon-saoyisao{
    font-size: .4rem;
    color: #fff;
}
/* ------------------------ header end */

/* ------------------------ main start */
.main{
    width: 100%;
    /* height: 2000px; */
    /* background-color: skyblue; */
    position: absolute;
    top: 0;
    bottom: .99rem;
    z-index: 10;
    /* overflow是用来处理溢出的 */
    overflow-x: hidden;
    overflow-y: auto;
}
.main .banner{
    width: 100%;
    height: 3.54rem;
}
.main .banner a{
    display: block;
    width: 100%;
    height: 3.54rem;
}
.main .banner a img{
    width: 100%;
    height: 100%;
}
.main .nav{
    height: 1.96rem;
    width: 100%;
    display: flex;
    background-color: #fff;
}
.main .nav a{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.main .nav a em{
    display: block;
    width: .88rem;
    height: .88rem;
    margin-bottom: .22rem;
}
.main .nav a em i{
    font-size: .88rem;
    color: #00b58c;
}
.main .nav a span{
    color: #333;
    font-size: .22rem;
}
.main .post{
    
}
.main .post .post-title{
    width: 100%;
    height: .9rem;
    background-color: #f8f9fa;
    /* 1px指的是css像素，最终在高清屏上，映射成发光点，映射成2行或3行发光点*/
    /* border-top: 1px solid #e8e9eb; */
    /* 1物理像素 就是一行发光点 */
    border-top: 1px solid #e8e9eb;
    border-bottom: 1px solid #e8e9eb;
    font-size: .26rem;
    text-align: center;
    line-height: .9rem;
    color: #333;
    font-weight: 800;
}
.main .post .section{
    padding-top: .34rem;
    padding-right: .32rem;
    padding-bottom: .3rem;
    padding-left: .3rem;
    margin-bottom: .2rem;
    background-color: #fff;
    border-top: 1px solid #e8e9eb;
    border-bottom: 1px solid #e8e9eb;
}
.main .post .section .post-name{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .2rem;
}
.main .post .section .post-name .name{
    font-size: .3rem;
    line-height: .3rem;
    color: #333;
}
.main .post .section .post-name  .salary{
    color: #ff7452;
    font-size: .23rem;
}
.main .post .section .post-address{
    display: flex;
    justify-content: space-between;
    font-size: .23rem;
    line-height: .23rem;
    color: #818181;
}
.main .post .section .post-tag{
    display: flex;
    margin-top: .28rem;
}
.main .post .section .post-tag span{
    background-color: #f4f5f7;
    font-size: .23rem;
    color: #a4a4a4;
    padding: .08rem .13rem .1rem;
    margin-right: .1rem;
    border-radius: .04rem;
}
.main .post .section .case{
    display: flex;
    margin-top: .42rem;
    align-items: center;
}
.main .post .section .case .img-box{
    width: .48rem;
    height: .54rem;
    margin-right: .26rem;
}
.main .post .section .case .img-box img{
    width: 100%;
    height: 100%;
}
.main .post .section .case p{
    font-size: .26rem;
    line-height: .26rem;
    color: #4b4b4b;
    margin-bottom: .20rem;
}
.main .post .section .case span{
    font-size: .22rem;
    line-height: .22rem;
    color: #9f9f9f;
}
/* ------------------------ main end */
    
/* ------------------------ footer start */
.footer{
    width: 100%;
    height: .99rem;
    border-top: 1px solid #b2b2b2;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    z-index: 100;
    background-color: #fff;
}
.footer p{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.footer p i{
    color: #9a9899;
    font-size: .42rem;
}
.footer p span{
    font-size: .18rem;
    color: #959595;
    margin-top: 0.15rem;
}
.footer p.active i{
    color: #00b589;
}
.footer p.active span{
    color: #00b589;
}
/* ------------------------ footer end */


